<template>
   <div class="container" @dragstart="handleDragStart">
       <div draggable="true" v-for="(item,index) in dsls" :key="index" class="item" :data-index="index"> 
          <span>{{item.label}}</span>
       </div>
      
   </div>
</template>
<script setup>
import dsls from '@/materials/index.js'

//通过下标找到对应的 dsl 通过e.dataTransfer.setData去传递下标
const handleDragStart =e=>{
      console.log('drag start...',e.target.dataset.index)
      e.dataTransfer.setData('index',e.target.dataset.index)
}
</script>

<style lang="scss" scoped>
  .container{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 10px;

      .item{
          width: 45%;
          border: 1px solid red;
          text-align: center;
          cursor:grab;
          margin-bottom:10px;
          text-align:center;
          padding: 2px 5px;
          display:flex;
          align-items:center;
          justify-content:center;

          &:active{
              cursor: grabbing;
          }
      }
  }
</style>